$font-colorTop: #07a1e4;
$font-colorNav: #f8cc04;
$font-colorOne: #ffd200;
$font-colorTwo: #ea6b3d;
$font-colorThree: #53f2f8;
$backgring-color: #03214b;
$font-sizeSM: 14px;
$font-sizeS: 16px;
$font-sizeM: 18px;
$font-sizeL: 22px;
$font-sizeXL: 30px;

* { margin:0;padding:0;box-sizing:border-box;}
ul {  list-style: none; }
ul > li { display: inline; }

#system {
  width:100%;
  height:100%;
  min-width:1200px;
  min-height:600px;
  overflow:hidden;
  color: #fff;
  position:relative;
  font-family:"Microsoft Yahei", Arial, sans-serif;
  background:rgb(40, 30, 47) url("assets/tmp/img/bi/swBack.png") 0 0 / 100% 100% no-repeat;
}

/* layout */
.margin-t {margin-top: 10px}
.margin-l { margin-left: 20px;}
.margin-lc { margin-left: 35px;}
.logo {width: 228px;height: 72px;}
#content-header { position:relative; height:128px; overflow:hidden;}
.header-times {
  display: flex;
  color: #fff;
  font-size: $font-sizeL;
  text-align: center;
  position: absolute;
  right: 1%;
  margin-top: 5px;

  p {
    width: 26px;
    height: 32px;
    line-height: 32px;
    margin-left: 2px;
    background-color: $backgring-color;
  }
}
.header-icon { position:absolute; top:42px; font-size:$font-sizeL; display: flex}
.header-nav { width: 1634px; background: rgb(11, 36, 72); display: flex;}
.header-top {
  width: 180px;
  text-align: center;
  line-height: 44px;

  p {
    height: 46px;
    color: $font-colorTop;
    font-size: $font-sizeL;
    margin-bottom: 0;
  }
  b {
    font-weight: normal;
    height: 46px;
    font-size: $font-sizeXL;
  }
}
#content-box { position:absolute;top:140px;bottom:0px;left:20px;right:0;}
#flexCon {
  height:97%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-row {
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;}
.flex-cell-l{-webkit-flex:3;-ms-flex:3;flex:3; background: url("assets/tmp/img/bi/swA.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-r {-webkit-flex:2.9;-ms-flex:2.9;flex:2.9; background: url("assets/tmp/img/bi/swC.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-b {-webkit-flex:3;-ms-flex:3;flex:3;}

.chart-wrapper {position:relative;height:100%;}
.vertical { height: 90%; display: flex; flex-direction:column; justify-content: space-between }
.vertical-botoom { height: 100%; display: flex; flex-direction:column; justify-content: space-between }
.chart-title {height:30px;font-size:$font-sizeM;font-weight:normal;color:$font-colorThree; display: flex;}
.chart-table { position:relative; top: 10px; left:2px; display: flex; min-height: 39%;}
.chart-table-left-bottom { position:relative; left:-18px; min-height: 39%;}
.chart-table-right-table { position:relative; left: 2px; min-height: 39%;}
.chart-table-right-bottom { position:relative; left: 2px; min-height: 39%; display: flex; background: rgba(0 ,160, 233, 0.05)}
.title-img {margin-left: 20px; position: relative; top: 2px; height: 1px; width: 92%; overflow: hidden; background: url("assets/tmp/img/bi/swB.png")  0 0 / 100% 100% no-repeat; }
.title-table {display: flex; flex-wrap: wrap;}
.the-pie {
  margin-left: 10px;
  .pie-tran {transform:translate(-111px,-54px)}
  p { color: $font-colorThree; font-size: $font-sizeM; }
  div:nth-child(2) { margin-left: 30px; }
  div > .pie-box {
    border: 1px solid $font-colorTop;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    overflow: hidden;
    .pie-nav { width: 300px; height: 300px; }
  }
}
.main-copy {text-align: center; font-size:$font-sizeSM; color: $font-colorOne }





/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .margin-l { margin-left: 15px;}
  .margin-t { margin-top: 5px;}
  .margin-lc { margin-left: 15px;}
  #content-header { height:123px;}
  .header-times {
    font-size: $font-sizeM;
    p { width: 22px;height: 26px;line-height: 26px; }
  }
  .header-icon {top: 35px}
  .header-nav { width: 1263px;}
  .header-top {
    width: 140px;
    line-height: 40px;

    p {
      height: 44px;
      font-size: 20px;
    }
    b {
      height: 44px;
      font-size: 26px;
    }
  }
  #content-box {top:125px;}
  .flex-cell {padding:10px;}
  .chart-title {height:20px;font-size:$font-sizeS;}
  .title-img { top: 4px;}
  .the-pie {
    .pie-tran {transform: translate(-109px,-41px);}
    p {font-size: $font-sizeS;}
    div:nth-child(2) { margin-left: 20px; }
    div > .pie-box { width: 100px; height: 100px;
      .pie-nav { width: 255px; height: 255px; }
    }
  }
  .main-copy {font-size: 12px;}
}

/*  1440 分辨率的显示器 */
@media screen and (min-width:1400px) and (max-width:1500px) {
  .header-nav { width: 1168px;}
  .title-img { top: 6px;}
}

/*  1680 分辨率的显示器 */
//@media screen and (min-width:1300px) and (max-width:1400px) {
//  .header-nav { width: 1070px;}
//  .header-top {width: 120px; p{font-size: 19px;} b{font-size: 24px;}}
//}
